<!-- login.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户登录 - 绿蜂巢</title>
    <link rel="stylesheet" href="static/css/styles.css">
</head>
<body>
<jsp:include page="header.jsp" />

<main class="login-container">
    <!-- 显示错误信息 -->
    <c:if test="${not empty error}">
        <div class="error-message">${error}</div>
    </c:if>

    <form class="login-form" action="loginServlet" method="post">
        <h2 class="form-title">欢迎回来</h2>

        <div class="form-group">
            <label class="form-label" for="username">用户名/邮箱</label>
            <div class="input-wrapper">
                <input type="text" class="form-input" id="username" name="username" required placeholder="请输入用户名或邮箱">
                <i class="fa fa-user"></i>
            </div>
        </div>

        <div class="form-group">
            <label class="form-label" for="password">密码</label>
            <div class="input-wrapper">
                <input type="password" class="form-input" id="password" name="password" required placeholder="请输入密码">
                <i class="fa fa-lock"></i>
            </div>
        </div>

        <a href="#" class="forgot-password">忘记密码？</a>

        <button type="submit" class="login-btn">
            登录账户
        </button>

        <div class="register-link">
            还没有账户？ <a href="signup.jsp">立即注册</a>
        </div>
    </form>
</main>

<jsp:include page="footer.jsp" />

<script>
    // 表单验证
    document.querySelector('form').addEventListener('submit', function(e) {
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;

        if (!username || !password) {
            e.preventDefault();
            alert('请填写用户名和密码');
        }
    });
</script>
</body>
</html>